<template>
    <div class="card-body" @click="isShow = (isShow ? isShow : !isShow) ">
        {{ group.group_name }}
    </div>
    <FullChat
    :chat_info="{id:group.group_id, chat_name:group.group_name}"
    v-show="isShow"></FullChat>
</template>

<script setup>
import { ref } from 'vue';
import FullChat from '../Chat/FullChat.vue';

const isShow = ref(false)
defineProps({
    group: {
        type: Object,
        default: {
            group_id: 0,
            group_level: 0,
            group_name: "",
            max_member_count:0,
            member_count:0,
        }
    }
})
</script>

<style scoped>
.card-body{
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 5%;
    background-color:aliceblue;
    border-radius: 20px;
    width: 100%;
    height: 10%;
}

</style>



